<template>
  <div class="main">
    <div class="top">
      <div class="back" @click="onClickLeft('/')">
        <img src="../assets/img/back.png" alt="" />
      </div>
      <div class="title">
       {{$t('m.认购Dpin')}}
      </div>
      <div class="navbtn" @click="onClickLeft('/mynft')">
       {{$t('m.Dpin认购记录')}}
      </div>
    </div>
    
    <div class="card fadeInUp">
      <div class="actives fadeInDow">
          <van-swipe
        class="my-swipe1"
        :autoplay="0"
        ref="swarp"
        @change="onChange"
        :show-indicators="false"      >
        <van-swipe-item v-for="(item, index) in banner" :key="index" >
          <img :src="dqyy =='en-US'?item.thumb_en: item.thumb" alt="" class="imgss" />
        </van-swipe-item>
      </van-swipe>  
      </div>
 
     <div class="cont">
        <div class="input">
          <input type="text" class="yinput" placeholder="0.0" v-model="snum" readonly>
          <div class=""  >
          <div class="dw" >
           <div class="tt" >USDT</div>  
          <img :src="require('../assets/img/usdt.png')" alt="usdt" class="ico">
          </div>           
      </div>
        </div>
        <div class="title"> {{$t('m.享受权益')}}</div>
        <div class="linebox">
      
          <div class="sitem" v-for="(item, index) in list" :key="index" 
          :class="curcent==index?'act':''" @click="onChanges(index)">{{item.rate}} {{$t('m.倍')}}</div>

        </div>
     </div>
      <div class="cont">
        <div class="tabnav">
      <div class="item" :class="acitve==2?'act':'' " @click="toTab(2)">HLU{{$t('m.支付')}}</div>
      <div class="item" :class="acitve==1?'act':'' " @click="toTab(1)">USDT{{$t('m.支付')}}</div>
     </div>
        <div class="title">{{$t('m.支付数量')}}</div>
        <div class="input">
          <input type="text" class="yinput" placeholder="0.0" v-model="pnum" readonly>
          <div class=""  >
           <div class="dw" >
           <div class="tt" >{{acitve==2?'Hlu':'USDT'}}</div>             
          <img :src="require('../assets/img/usdt.png')" alt="usdt" class="ico" v-if="acitve==1">
          <img :src="require('../assets/img/bnb.png')" alt="usdt" class="ico" v-if="acitve==2">
          </div>  
           </div>
        </div>
        <div class="yue" v-if="acitve==1">{{$t('m.钱包余额')}}：{{usdtNum||0}}</div>
       <div class="yue" v-if="acitve==2">{{$t('m.钱包余额')}}：{{huluNum||0}}</div>
    
       
      </div>
      <div class="bottom">
        <van-button
          :loading="loading"
          type="primary"
          @click="toBuy()"
          class="btn"
          > {{$t('m.qrcy')}}</van-button
        >
      </div>
       <div class="beizhu">{{$t('m.备注手续费')}} 3% </div>
    </div>
    <Loadings v-if="uploading"/>
  </div>
</template>

<script>
import { getProducts,getMyUsdt,getMyHulu,toBookOrder,toApprove,toApproves,getProved,getProveds,getPrice} from "@/api/Public";
import Web3 from 'web3'
import Loadings from '@/components/loading.vue'
export default {
  components: {Loadings},
  data() {
    return {
      userWallet: "",
      userInfo:'',
      list: [],
      loading: false,
      uploading:false,
      curcent:0,
      snum:"",
      pnum:"",
      usdtNum:0,
      huluNum:0,
      price: 1,
      acitve:1,
      banner: [ 
        {  "thumb": require('../assets/img/u200.png'),"thumb_en": require('../assets/img/u200.png')},
        {  "thumb": require('../assets/img/u500.png'),"thumb_en": require('../assets/img/u500.png')},
        {  "thumb": require('../assets/img/u1000.png'),"thumb_en": require('../assets/img/u1000.png')},
      {  "thumb": require('../assets/img/u2000.png'),"thumb_en": require('../assets/img/u2000.png')},
        ],   
        sqNum:'',
        sqNums:"",
        
    };
  },
  computed: {
    dqyy() {
      if (this.$store.getters.language) {
        return this.$store.getters.language;
      } else {
        return "zh-CN";
      }
    },
  },
  filters: {
    yingcang(val) {
      if (val) {
        let a = val.replace(/(\w{8})\w+(\w{8})/, "$1...$2");
        return a;
      } else {
        return "";
      }
    },
  },
  watch: {
    "$store.getters.userWallet": function (val) {
      this.onClickLeft("/");
    },
    deep: true,
    immediate: true,
  },
 async created() {
    this.userWallet = this.$store.getters.userWallet;
    this.uploading=true
   await this.getPrice()
   await this.getMyAmount()
   await this.getlist()
  },
  methods: {
    dexc(val){
    if(val){
      let  ethereum = window.ethereum
    let web3s = new Web3(ethereum);
      let amount=  web3s.utils.fromWei(val +'', 'ether'); 
      // let num =val/Math.pow(10,18)
      return val? Math.floor(amount*1000000)/1000000:'0'
    }else{
      return 0
    }
    },
    onChange(e){
      if(this.loading){return}
      this.curcent=e
      this.snum=this.list[e].amount
      this.jsPrice()
    },
    onChanges(index){
      if(this.loading){return}
      this.curcent=index
      this.$refs.swarp.swipeTo(index,300,false)
    },
    getMyAmount(){  
      getMyHulu(this.$store.getters.userWallet).then(res=>{
          this.huluNum=Math.round(res*1000000)/1000000
      })
      getMyUsdt(this.$store.getters.userWallet).then(res=>{
          this.usdtNum=Math.round(res*1000000)/1000000
      })
  },
  jsPrice(){    
      setTimeout(() => {
        if(this.acitve==2){
          this.pnum=Math.round((this.snum*1.03/this.price)*1000000)/1000000
        }else{
          this.pnum=Math.round((this.snum*1.03)*1000000)/1000000
        }
        this.uploading=false
      }, 100);
     
  },
  toTab(e){
      this.acitve=e
      this.jsPrice()
    },  
   async toBuy(){
     this.loading=true
     if(this.acitve==1){
        getProved(this.userWallet).then(res=>{
          console.log(res);
          this.sqNum=res
          if(this.sqNum-this.pnum>0){
              this._buy()
            }else{
              this.toApproveAll()
            }
        })
      }
      if(this.acitve==2){
        getProveds(this.userWallet).then(res=>{
          console.log(res);
          this.sqNum=res
          if(this.sqNum-this.pnum>0){
            this._buy()
          }else{
            this.toApproveAll()
          }
        })
      }
   
    },
    _buy(){
      console.log(this.curcent,this.acitve);
      toBookOrder(this.userWallet,this.curcent,this.acitve).then(res=>{
        this.loading=false
        if(res){
          this.$notify({
                message: this.$i18n.t("m.操作成功"),
                type: "success",
              });
        }else{
          this.$notify({
                message: this.$i18n.t("m.操作失败"),
                type: "danger",
              });
        } 
      })
    },
    toApproveAll(){
      if(this.acitve==1){
        let pnum=Math.ceil(this.pnum)
        toApprove(this.userWallet,pnum).then(res=>{
          if(res){
            this.sqNum=pnum
            this._buy()
          }else{
            this.loading=false
          }
        })
      }
      if(this.acitve==2){
        let pnum=Math.ceil(this.pnum)
        toApproves(this.userWallet,pnum).then(res=>{
          if(res){
            this.sqNum=pnum
            this._buy()
          }else{
            this.loading=false
          }
        })
      }
    },

    async getlist(){
      
      getProducts().then(res=>{
        console.log(res);
        if(res){
        let lists=  res.map((el,i)=>{
            let obj=Object.assign({},el)
            obj.amount=this.dexc(el.amount)
            return obj
          })
          Promise.all(lists).then((results) => {
                    this.list=results
                    this.snum=results[0].amount
                  }).catch((error) => {
                    console.error('Error fetching order details:', error);
                  });
        }
      })
      
    },
















    getFate(){
      getMyUsdt(this.$store.getters.userWallet).then(res=>{
        console.log(res);
        this.myAmount=res
      })
    },
      topType(e){
          if(!this.loading){
          this.ptype=e}},
    getBase(){
       this.$get({
        url: "wms-wallet/getWallet",
        data:{ trxAddress:this.userWallet},
        callback: (res) => {
          this.$nextTick(function () {
              this.userInfo=res.data
          })
        }
       })
       this.$get({
        url: "wms-wallet/getMinTeam",
        data:{ uid:this.$store.getters.myID},
        callback: (res) => {
          this.$nextTick(function () {
              this.teamRadio=res.data
          })
        }
       })
       
    },
    getlimt() {
      this.$get({
        url: "plat-history/getDay",
        data: { uid: this.$store.getters.myID },
        callback: (res) => {
          this.$nextTick(function () {
            if (res.data) {
              this.base = res.data;
            }
          });
        },
      });
    },
   
  
    async toMax() {
      if (this.loading) {
        return;
      }
      await this.getlimt();
      this.Amount = this.base.info3;
    },
    js() {
      setTimeout(() => {
        if (this.base.info3 > 0) {
          this.Amount =
            this.Amount > this.base.info3 ? this.base.info3 : this.Amount;
        } else {
          this.Amount = 0;
        }
      }, 100);
    },

    getPrice(){
      getPrice().then(res=>{
        this.price=res ?Math.round(res*1000000)/1000000:'0'        
        this.jsPrice()
      })
    },

    onClickLeft(val) {
      if (this.loading) {
        this.$notify(this.$i18n.t("m.wxtswtjxz"));
        return;
      } else {
        this.$router.replace({ path: val });
      }
    },
    menu() {
        if(this.value>0){
           this.$get({
       url: "wms-wallet/getWallet",
        data:{ trxAddress:this.userWallet},
        callback: (res) => {
          this.$nextTick(function () {
            if (res.data.userLevel<0) {
              this.menuShow = true; 
            }else{
              this.$notify(this.$i18n.t("m.nyrg"));
            }
          });
        },
      });
          
        }else{
             this.$notify(this.$i18n.t("m.qxztzed"));
        }
    },
    gbsmenu() {
      this.menuShow = false;
    },
    toJoin(){
     if(this.value>0){
        let amount=(this.value*1000).toFixed(4)
        if(amount>0){
             this.loading=true
      upnode(this.$store.getters.userWallet,amount).then(trxId=>{
        // console.log(trxId,'trxId');
        //  trxId='0xa67cbb1582b8f3c4d069ba1e82370ff665b8bf248177ec5c85fb6761556ea8be'
        if(trxId){
                 this.$post({
        url: "ums-product-history/createHistory",
        data: { uid: this.$store.getters.myID,
          p1:amount,
          t1:this.value,
          trxId:trxId,
          trxAddress:this.$store.getters.userWallet
        },
        callback: (res) => {
          this.$nextTick(function () {
            this.loading=false
            if (res.data) {
               this.$notify({
                message: this.$i18n.t("m.rgcg"),
                type: "success",
              });
              this.getFate()
              this.pAmount={}
              this.menuShow=false
            }else{
              this.$notify(this.$i18n.t("m.rgsb"))
            }
          })}
                 })
        }else{
          this.loading=false
            this.$notify(this.$i18n.t("m.qxrg"))
        }
      })
        }
     }


        
    },
    tochange(e){
      if(this.loading){return}
      this.pAmount=e
    },
    _pay(haxi, amount, type) {
      this.$post({
        url: "plat-history/createHistory",
        data: {
          trxAddress: this.userWallet,
          uid: this.$store.getters.myID,
          price:amount,
          type: type,
          trxId: haxi,
        },
        callback: (res) => {
          this.$nextTick(function () {
            this.loading = false;
            if (res.data) {
              this.$notify({
                message: this.$i18n.t("m.cycg"),
                type: "success",
              });
        this.menuShow=false
            } else {
              this.$notify(this.$i18n.t("m.cysb"));
            }
          });
        },
      });
    },
    goto(val) {
      this.$router.push({ path: val });
    },
    changer(val) {
      if (val == "en-US") {
        val = "zh-CN";
      } else {
        val = "en-US";
      }
      this.$i18n.locale = val;
      this.$store.commit("language", val);
    },
    onRefresh() {
      this.finished = false;
      this.loading = true;
      this.onLoad();
    },

    onLoad() {
      if (this.page == 1) {
        this.list = [];
        this.refreshing = false;
      }

      this.$post({
        url: "user/UserReward",
        header: this.$store.getters.userWallet,
        data: {
          page: this.page,
          ftype: this.active == 0 ? "18" : this.active == 1 ? "21" : "24",
          list_rows: 10,
        },
        callback: (res) => {
          this.$nextTick(function () {
            if (res.data.data) {
              this.loading = false;
              if (this.page > 1) {
                this.list = [this.list, ...res.data.data];
              } else {
                this.list = res.data.data;
              }

              if (res.data.data.length >= 10) {
                this.page++;
              } else {
                this.finished = true;
              }
            }
          });
        },
      });
    },

    
    onCopy() {
      this.$toast("复制成功");
    },
    onError() {
      this.$toast("复制失败");
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../src/assets/scss/_handle.scss";
$t-mf: "PingFang";
$t-f: "DINAlternate-Bold";
.main {
  height: 100%;
  min-height: 100vh;
  width: 750px;
  margin: 0 auto;
  padding-bottom: 36px;
 background:  #161628 url("../assets/img/dsbg.jpg")  fixed no-repeat;
  // background: #0F112A;
  background-size:cover;
  background-position: top center;
  position: relative;
  ::v-deep.van-nav-bar__content {
    height: 80px !important;
  }
  ::v-deep.van-nav-bar__arrow {
    font-size: 36px;
  }
  ::v-deep.van-ellipsis {
    font-size: 32px;
    line-height: 44px;
  }
  .top {
    background: #012f2bbf;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 28px;
    height: 96px;
    margin: 0 auto;
    color: #fff;
    border-bottom: 1px solid #1cc10e;
    .back {
      position: absolute;
      left: 20px;
      width: 50px;
      height: 50px;
      //   background: linear-gradient(45deg,#e4005e, #34C717);
      // border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        height: 50px;
        width: 50px;
      }
      .icosn {
        height: 36px;
        margin-right: 5px;
        width: 36px;
      }
    }
    .title {
      background: linear-gradient(234deg, #ffffff, #ffffff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-size: 36px;
      font-weight: 600;
      font-family: $t-f;
    }
    .navbtn {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      width: 150px;
      position: absolute;
    right: 28px;
    font-size: 24px;
        font-family: $t-mf;
        font-weight: 600;
        color: #fff;
        line-height: 42px;
        white-space: nowrap;
      .img {
        width: 36px;
        height: 30px;
      }
      .img2 {
        width: 36px;
        height: 36px;
        margin: 0 36px;
      }
      .lang {
        font-size: 22px;
        font-family: $t-mf;
        font-weight: 600;
        color: #fff;
        line-height: 42px;
        // margin-left: 20px;
      }
    }
  }
  .card {
    width: 652px;
    // background: rgb(5 3 15) url('../assets/img/abg.png') no-repeat;
     box-shadow: 0px 8px 6px #00000087;
    background: #000000e0;
        background-size: 100% 100%;
    border-radius: 0px;
    padding: 20px;
    margin: 5% auto;
    // border: 1px solid #34C717;
     border: 1px solid #34C717;
     .my-swipe1 {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    // padding: 10px; 
     .imgss {
      width: calc(100% - 0px);
      height: 280px;
    border-radius: 0px;
    box-shadow: 0 1px 1px rgb(0 0 0 / 12%), 0 2px 2px rgb(0 0 0 / 12%), 0 4px 4px rgb(0 0 0 / 12%), 0 8px 8px rgb(0 0 0 / 12%), 0 16px 16px rgb(0 0 0 / 12%);
    }
    }
    .tabnav{
    display: flex;
    align-items: center;
    height: 68px;
    justify-content: center;
    // border-bottom: 1px solid #582204;
    padding-bottom: 6px;
    margin-top: 6px;
    .item{
      width: 340px;
      height: 68px;
      font-size: 28px;
      color: #A6A6A6;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 16px;
    }
    .act{
      font-weight: bold;
      color: #0af347;
      font-size: 34px;
      animation: all 0.3s;
    }
  }
  .cont{
      padding: 24px 0 40px;
      border-bottom: 1px solid #2A2A2A;
      .input{
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          background: #1e473a;
          height: 86px;
          padding: 8px 30px 8px 30px;
          box-sizing: border-box;   
          overflow: hidden;    
          .yinput{
            border: none;
            background: transparent;
            color: #ffffff;
            font-size: 32px;
            font-weight: bold;
            width: 100%;
          }
          .dw{
            display: flex;
            align-items: center;
            .tt{
              color: #ffffff;
              font-size: 28px;
              font-weight: bold;
              margin:  0 10px;                
              white-space: nowrap;
            }
            .ico{
              width: 40px;
              height: 40px;
              margin-right: 8px;
            }
          }
        }
        .yue{
          font-size: 24px;
          color: #ABABAB;
          margin-top: 20px;
          text-align: left;
          width: 100%;
        }
        .title{
            font-size: 28px;
                    color: #ffffff;
          margin: 18px 0 8px;
          text-align: left;
          width: 100%;
        }
        .linebox{
          margin-top: 12px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .sitem{
              padding: 10px 20px;
              // border-radius: 30px;
              text-align: center;
              color: #ffffff;
              font-size: 26px;
              font-weight: 600;
              height: 56px;
              display: flex;
              align-items: center;
              justify-content: center;
              text-align: center;
              width: 140px;
              box-sizing: border-box;
              border: 1px solid transparent;
              background: #00000075;
          }
          .act{
            background: linear-gradient(48deg, #48642f, #16ce0a);
        border: 1px solid #ffffff;
          }
        }
        .dh{
          margin: 40px auto;
          .img{
              width: 88px;
          }
        }
  }
    .tops{
          display: flex;
          justify-content:center;
          align-items: center;
          position: relative;
          // margin: 48px;
          width:100% ;
          text-shadow: 0px 2px 15px rgba(0,0,0);
          .nft{
            width:100%;
            height:auto;
            background: #fff6f6;
            border: 1px solid  #34C717;
                 box-shadow: 0px 18px 6px rgb(16 16 16 / 39%);
          }
    }
    .logo {
      width: 250px;
    }
    .yqlink {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-top: 18px;
      .ltxt {
        font-size: 30px;
        font-family: $t-f;
        font-weight: 600;
        color: #ffffff;
        text-align: center;
        width: 100%;
        margin: 0px 24px;
      }
      .mylink {
        width: 440px;
        height: 60px;
        background: #fff;
        border-radius: 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 22px;
        .address {
          width: 250px;
          height: 32px;
          font-size: 22px;
          font-family: $t-mf;
          font-weight: 600;
          color: #000000;
          line-height: 32px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .fuzhi {
          background: transparent;
          border: none;
          width: 50px;
        }
        .icon {
          width: 42px;
          height: 42px;
        }
      }
    }
    .line {
      width: 100%;
      height: 1px;
      // background: #f8f8f8;
      margin: 10px 0;
    }

    .bg {
      // background: linear-gradient(234deg, #e4005e, #34C717);
      margin: 20px auto;
      padding: 15px;
      position: absolute;
      width: 100%;
      height: 100%;
      // box-shadow: 0 10px 5px rgb(10 10 10 / 54%);
    }
    .flex {
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      align-items: center;
      .act {
        // border: 5px solid #EF155D;
        // border-radius: 10px;
        color: #ffffff;
            background: rgb(25 0 22 / 51%);
    box-shadow: 2px 2px 0.04rem 0px #131418;
        // background:#0800195e;
        //  box-shadow:  inset 2px 2px 3px 0px #131418, inset -2px -2px 3px 0px #474853;
      }
    }
    .box{
      min-height: 300px;
      width: 100%;
    
    }
    .tips {
        flex-grow: 1;
        border: 5px solid transparent;
      font-size: 30px;
      font-family: $t-f;
      font-weight: 400;
      color: #333333;
      text-align: left;
      padding: 20px;
      background: rgb(255 255 255 / 100%);
      display: flex;
      align-items: center;
      overflow: hidden;
      flex-direction: column;
      margin: 20px 0;
    width: calc(100% - 38px);
    justify-content: flex-start;
    box-sizing: border-box;
    .stop{
         display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
    }
    .sbottom{
      width: 100%;
      .lines{
        margin: 20px;
          display: flex;
      align-items: center;
      justify-content: space-between;
          border-bottom: 1px solid #ffffff33;
    padding-bottom: 20px;
      span:nth-child(2){
        color: #F80658;
      }
      }
    }
      .imgs {
        height: 48px;
        width: 48px;
        margin: 10px;
      }
      input {
        border: none;
        background: transparent;
        height: 56px;
        flex: 1;
      }
      .max {
        width: 100px;
        height: 50px;
        background: #262626;
        border-radius: 10px;
        margin: 10px;
        color: #fff;
        text-align: center;
        line-height: 50px;
        font-size: 22px;
      }
    }
    .ye {
      margin: 20px 34px;
      padding: 5px;
      font-size: 18px;
      white-space: nowrap;
      text-align: left;
      color: #ffffff;
      font-weight: 600;
      font-family: $t-f;
    }
    .btns {
      width: 638px;
      height: 80px;
      background: #000000;
      border-radius: 40px;
      font-size: 32px;
      font-family: $t-mf;
      font-weight: 600;
      color: #ffffff;
      line-height: 80px;
      margin: 18px auto 20px;
    }
  }
  .list {
    width: 696px;
    min-height: 252px;
    background: #ffffff;
    border-radius: 20px;
    margin: 0px auto;
    overflow: auto;
    .title {
      font-weight: 600;
      font-size: 28px;
      margin: 20px 32px;
      text-align: left;
    }
    .list-top {
      display: flex;
      align-items: left;
      justify-content: space-between;
      margin: 50px 0 0;
      border-top: 1px solid #f8f8f8;
      border-bottom: 1px solid #f8f8f8;
      padding: 30px 30px 30px;
      div {
        font-size: 24px;
        font-family: $t-mf;
        font-weight: 600;
        color: #8b8b93;
        line-height: 34px;
        text-align: left;
        white-space: nowrap;
        margin: 0 5px;
      }
    }
    .list-item {
      width: 100%;
      div {
        font-size: 24px;
        font-family: $t-f;
        font-weight: 400;
        color: #666666;
        line-height: 34px;
        text-align: left;
        // margin: 0 5px;
        white-space: nowrap;
        flex: 1;
        .fuzhi {
          background: transparent;
          border: none;
          width: 30px;
        }
        .fz {
          width: 28px;
          height: 26px;
          margin: 0 -5px;
        }
      }
      .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 24px 0px;
        border-bottom: 1px solid #f7f7fa;
        width: 100%;
      }
    }
    .d1 {
      width: 50%;
    }
    .d2 {
      width: 50%;
      text-align: right !important;
    }
  }

  .bottom {
    margin: 14px 0 14px;
    display: flex;
    align-items: center;
    .btn {
      // width: calc(100% - 48px);
      width: 100%;
      height: 80px;

    //   background: #61348b;
    background:  linear-gradient(48deg, #48642f, #16ce0a);
// box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.05), 0px 6px 12px 0px rgba(68,215,182,0.1);
      box-shadow: 0px 4px 6px 0px rgb(0,0,0);
        border: 1px solid #2a2a2a; 
      font-size: 32px;
      border-radius:0px ;
      font-family: $t-mf;
      font-weight: 600;
      color: #ffffff;
      line-height: 80px;
      margin: 20px auto;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .stbn {
      font-size: 30px;
      font-family: $t-f;
      font-weight: 600;
      color: #8b8b94;
      margin: 10px auto;
      line-height: 34px;
    }
  }
   .beizhu{
      color: #a6a6a6;
      margin-top: 8px;
      font-size: 24px;
      text-align: left;
    }
  .mentop {
    display: flex;
    justify-content: space-between;
    margin: 44px 30px;
    .logo {
      // height: 82px;
      width: 232px;
    }
    .gb {
      height: 40px;
      width: 40px;
      margin-right: 8px;
    }
  }
  .menulist {
    margin-top: 100px;
    .menuitem {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 44px;
      border-bottom: 1px solid #f8f8f8;
      padding-bottom: 30px;
      .left {
        flex: 1;
        text-align: left;
        display: flex;
        img {
          height: 48px;
          width: 48px;
        }
        .txt {
          margin-left: 40px;
          font-size: 36px;
          font-family: $t-mf;
          font-weight: 600;
          @include font_color("font_color1");
          line-height: 50px;
        }
      }
      .right {
        img {
          height: 38px;
          width: 26px;
        }
      }
    }
  }
  .buttoms {
    height: 28px;
    font-size: 24px;
    font-family: $t-f;
    font-weight: bold;
    color: #999999;
    line-height: 28px;
    margin: 80px auto 0px;
    padding-bottom: 80px;
    width: 100%;
  }
  .card2{
        width: 652px;
    background: rgba(38, 38, 38, 0.48) url('../assets/img/bm/emit.png') no-repeat;
    //  box-shadow: 0px 4px 16px 4px rgba(62,1,162,1);
        background-size: contain ;
        background-position: center;
    border-radius: 20px;
    padding: 20px;
    min-height: 200px;
    margin: 5% auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .sitem{
         width: calc( 50% - 40px);
    text-align: center;
    background: rgba(0, 0, 0, 0.3411764705882353);
    margin: 10px;
    padding: 10px;
          .ttt{
               font-size: 24px;
        font-family: $t-mf;
        font-weight: 600;
        color:#888888;
        line-height: 40px;
        margin-top: 12px;

          }
          .num{
          margin-top: 22px;
        font-size: 26px;
        font-family: $t-f;
        font-weight: bold;
        background: linear-gradient(234deg,#e4005e, #34C717);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        white-space: nowrap;
          }
      }
  }
    .popup {
    width: 672px;
    background: #000000;
    border-radius: 30px;
    ::v-deep.van-list{
      height: 50vh;
    overflow: auto;
    }
    // .title {
    //   font-size: 48px;
    //   font-family: $t-mf;
    //   font-weight: 600;
    //   color: #ffffff;
    //   line-height: 66px;
    //   margin: 44px auto;
    // }

    .bg {
      // background: linear-gradient(234deg, #e4005e, #34C717);
      // margin: 20px auto;
      padding: 15px;
      // width: 100%;
      height: 100%;
      // box-shadow: 0 10px 5px rgb(10 10 10 / 54%);
    }
    .box{
      min-height: auto;
    width: auto;
    border: 1px solid #ffffff33;
    // padding: 10px;
    // background: linear-gradient(8deg, #3C2F64, #CE0A54);
 .imgss{
      width: 100%;
      height: auto;
     }
    }
    .txt{ 
      margin: 10px 20px;
      font-size: 26px;
      text-align: left;
      color: #ffffff;
      }
    .flex {
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      align-items: center;
      .act {
        // border: 5px solid #EF155D;
        // border-radius: 10px;
        color: #ffffff;
            background: rgb(25 0 22 / 51%);
    box-shadow: 2px 2px 0.04rem 0px #131418;
        // background:#0800195e;
        //  box-shadow:  inset 2px 2px 3px 0px #131418, inset -2px -2px 3px 0px #474853;
      }
    }
    .tips {
        flex-grow: 1;
        border: 5px solid transparent;
      font-size: 30px;
      font-family: $t-f;
      font-weight: 400;
      color: #333333;
      text-align: left;
      padding: 20px;
      background: rgb(255 255 255 / 100%);
      display: flex;
      align-items: center;
      overflow: hidden;
      flex-direction: column;
      margin: 20px 0;
    width: calc(100% - 38px);
    justify-content: flex-start;
    box-sizing: border-box;
    .stop{
         display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
    }
    .sbottom{
      width: 100%;
      .lines{
        margin: 20px;
          display: flex;
      align-items: center;
      justify-content: space-between;
          border-bottom: 1px solid #ffffff33;
    padding-bottom: 20px;
      span:nth-child(2){
        color: #F80658;
      }
      }
    }
      .imgs {
        height: 48px;
        width: 48px;
        margin: 10px;
      }
      input {
        border: none;
        background: transparent;
        height: 56px;
        flex: 1;
      }
      .max {
        width: 100px;
        height: 50px;
        background: #262626;
        border-radius: 10px;
        margin: 10px;
        color: #fff;
        text-align: center;
        line-height: 50px;
        font-size: 22px;
      }
    }








    .xztype{
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: column;
       ::v-deep .van-stepper__input{
          font-size: 42px;
        }
        .tab{
          display: flex;
          align-items: center;
          justify-content: space-around;
          width: 100%;
              .tag{
       width: calc(30% - 20px);
       border: 3px solid #34C717;
       border-radius: 8px;
      font-size: 30px;
      font-family: $t-f;
      font-weight: 400;
      color: #ffffff;
      text-align: left;
      padding: 10px 10px;
      display: flex;
      background: #000;
      align-items: center;
      overflow: hidden;
      margin: 20px 10px 0;
      justify-content: center;
          }
           .act{
               background:linear-gradient(315deg, #34C717 0%, #34C717 100%);
        // border-radius: 10px;
        color: #ffffff;
        }
        }
        .item{
        width: calc(100% - 200px);
      font-size: 30px;
      font-family: $t-f;
      font-weight: 400;
       color: #ffffff;
      text-align: left;
      padding: 0px 10px;
      display: flex;
      align-items: center;
      overflow: hidden;
      margin: 20px 10px 0;
      justify-content: center;
         white-space: nowrap;   
        }
      
    }
      .btn {
     width: calc(100% - 200px);
      height: 80px;
      font-size: 32px;
      font-family: $t-mf;
      font-weight: 600;
      color: #ffffff;
      line-height: 80px;
      margin: 54px auto;
background:linear-gradient(48deg, #48642f, #16ce0a);
box-shadow: 0px 4px 16px 4px rgb(10, 10, 10);
  border: 1px solid #ffffff; 
border-radius: 0px;
  display: flex;
      align-items: center;
      justify-content: center;
    }
    }
    .card3{
      .level{
      font-size: 28px;
        font-family: $t-mf;
        font-weight: 600;
        color:#ffffff;
        line-height: 40px;
        margin-top: 12px; 
      }
      .lname{
        font-size: 24px;
        font-family: $t-mf;
        font-weight: 600;
        color:#888888;
        line-height: 40px;
        margin-top: 12px;
      }
    }
}

</style>